<template>
  <div class="wallet vertical center  body_sec">
    <div class="head">
      <nut-navbar class="navbar" z-index="5" :clickable="false" placeholder>
        <template #content>
          <span>{{ t('route_page_withdrawals') }}</span>
        </template>
        <template #left>
          <iconpark-icon @click="router.go(-1)" class="close" icon-id="tongyicontyfanh" size="2.4rem"></iconpark-icon>
        </template>
        <template #right>
          <div class="right-handler">
            <iconpark-icon name="wallrticontongy01" :class="refreshFlag && 'refresh'" size="24" @click="refresh" />
            <iconpark-icon v-if="eyeOpen" name="wallrticontongy02" size="24" @click="changeEyeOpen(false)" />
            <iconpark-icon v-else name="wallrticontongy03" size="24" @click="changeEyeOpen(true)" />
          </div>
        </template>
      </nut-navbar>
    </div>

    <div class="content">
      <div class="withDraw_top bg_color">
        <div class="label">
          <p>{{ t('withdraw_page_withdrawMon') }}: </p>
          <p class="mon">
            {{eyeOpen ? form.maxValue : hideText}}
          </p>
        </div>
        <div class="mon_sec">
          <div class="flex">
            <p> {{`${t('withdraw_page_lockMon')}: ${withdrawData.canot_withdraw}`}}</p>
            <p>{{t('locked_info')}}</p>
          </div>
          <p>{{`${t('withdraw_page_turnover')}: ${withdrawData.turnover}`}}</p>
        </div>
        <div class="daiwancheng" v-if="showDaiWanCheng">{{ t('withdraw_page_fail_wait') }}...</div>
      </div>
      <nut-form label-position="top" ref="formRef" class="form_bg">
        <div class="bg_color form_center">
          <nut-form-item :label="t('walletInfo_page_selectBank')">
            <div class="change_bank">
              <div class="selectBank">
                <div class="bankName" v-show="backItemInfo.bank_name">
                  <div class="icon">
                    <ImgT :src="`/imgs/bankIcon/bank_logo_${backItemInfo.bank_id}.webp`" />
                  </div>
                  <span>{{ backItemInfo.bank_name }}</span>
                </div>
                <div class="mantissa">
                <span v-show="backItemInfo.bank_name">{{ t('walletInfo_page_tailNumber') }}：{{
                    backItemInfo.account_number.substring(backItemInfo.account_number.length - 4,
                        backItemInfo.account_number.length)
                  }}</span>
                </div>
              </div>
              <nut-button :bordered="false" block class="change_btn button_color" @click="showChangeBank">
                {{ t('withdraw_page_newAdd') }}
                <template #icon>
                  <iconpark-icon class="icon_jt" icon-id="mineiconfangx03" color="#fff" size=".88rem"></iconpark-icon>
                </template>
              </nut-button>
            </div>
          </nut-form-item>
        </div>
        <div class="bg_color">
          <nut-form-item :label="t('walletInfo_page_withdrawalMon')">
            <nut-input size="large" @blur="inputBlur" v-model="form.amount" :placeholder="t('deposit_page_enterMon')">
              <template #right>
                <span class="refresh_icon" @click="form.amount = ''"></span>
              </template>
            </nut-input>
          </nut-form-item>
          <div class="flex kjje_div">
            <p class="kj_item" style="color: #fff;" v-for="(item, index) in chooseMoneyArr"
               @click="chooseFastMon(item.value)" :key="index">
              {{ item.label }}
            </p>
          </div>
          <div v-show="removeComma(form.amount) > 0" class="projected flex item-center">
            <p>{{ t('deposit_page_arrival') }}：</p>
            <p>{{ form.amount }}</p>
          </div>

          <nut-form-item>
            <template #label>
              <div class="label-capital">
                <p>{{ t('withdraw_page_payPwd') }}</p>
                <nut-switch active-color="#0cc51e" inactive-color="#636a79" class="switch-password"
                            v-model="switchPassword" @change="switchChange" />
              </div>
            </template>
            <nut-input v-if="switchPassword" v-model="form.capitalPassword" :readonly="readonly"
                       :placeholder="t('walletInfo_page_enterPayPwd')" :type="!form.showConfirm ? 'password' : 'text'">
              <template #right>
                <div class="flex item-center" @click="checkShowConfirm">
                  <iconpark-icon v-if="!form.showConfirm" name="wallrticontongy03"></iconpark-icon>
                  <iconpark-icon v-if="form.showConfirm" name="wallrticontongy02"></iconpark-icon>
                </div>
              </template>
            </nut-input>
          </nut-form-item>
        </div>

      </nut-form>


      <div class="btn_zone flex ">
        <nut-button :bordered="false" class="submit_btn button_color pointer" block @click="onSubmit">{{
          t('walletInfo_page_immediately') }}
        </nut-button>
      </div>

      <div class="flex align-center justify-center tips">
        <span class="icon" style="margin-right: 6px;">
          <iconpark-icon name="tongyiconhonsts02"></iconpark-icon>
        </span>
        <span style="color: #fff;"> {{ t('walletInfo_page_tranferTips') }} </span>
      </div>
    </div>


    <nut-popup v-model:visible="addBankCardVisible" class="my_popup" position="bottom" :style="{ height: '75%' }">
      <AddBankCard @updateMyBankList="getMyBankList" :bankListData="bankListData" @addBankCardVisible="addBankCardUse"
        :myBankData="myBankData" @openChooseBank="openChooseBank" />
    </nut-popup>

    <nut-popup v-model:visible="calibrationVisible" position="bottom" :style="{ height: '100%' }">
      <calibration-info :calibrationVisible="calibrationVisible" :bankListData="bankListData" :myBankData="myBankData"
        @openChooseBank="openChooseBank"></calibration-info>
    </nut-popup>


    <nut-popup v-model:visible="closeCapitalVisible" position="bottom" :style="{ height: '50%' }" @close="capitalClose">
      <div class="capital-content">
        <nut-input v-model="capitalPassword.value" :placeholder="t('walletInfo_page_enterPayPwd')"
          :type="!capitalPassword.showConfirm ? 'password' : 'text'">
          <template #right>
            <div class="flex item-center" @click="() => { capitalPassword.showConfirm = !capitalPassword.showConfirm }">
              <iconpark-icon v-if="!capitalPassword.showConfirm" name="wallrticontongy03"></iconpark-icon>
              <iconpark-icon v-if="capitalPassword.showConfirm" name="wallrticontongy02"></iconpark-icon>
            </div>
          </template>
        </nut-input>
        <nut-button :bordered="false" class="btn" block @click="capitalConfirm">{{ t('home_page_confirm')
          }}</nut-button>
      </div>
    </nut-popup>


    <!-- 选择银行弹窗 -->
    <chooseBankDialog ref="chooseBankModal" @selectBank="selectBank" />
    <!-- 保险箱弹框 -->
    <Modal v-model:visible="showSafeBox" :title="$t('walletInfo_page_wallet')" :zindex="1000">
      <view class="safe_box">
        <view class="content">
          <view class="safe_data">
            <view class="left">
              <view class="title">{{ t('wallet_type_map_1') }}</view>
              <view class="amount">{{ verifyNumberComma(String(roleInfo.money)) }}</view>
            </view>
            <view class="right">
              <view class="title">{{ t('wallet_type_map_2') }}</view>
              <view class="amount">{{ verifyNumberComma(String(roleInfo.bank_money)) }}</view>
            </view>
          </view>
          <view class="safe_money">
            <view class="title">{{ t('walletInfo_page_in') }}</view>
            <nut-input size="large" v-model="saveAmount" :placeholder="t('bank_tip_empty_amount')">
              <template #right>
                <span class="refresh_icon" @click="saveAmount = ''"></span>
              </template>
            </nut-input>
            <div class="flex kjje_div">
              <p class="kj_item" style="color: #fff;" v-for="(item, index) in choosePercent"
                @click="chooseSafeAmount(item.value)" :key="index">
                {{ item.label }}
              </p>
            </div>
            <div class="btn_zone flex ">
              <nut-button :bordered="false" class="submit_btn  weight_5 center pointer" block
                @click="handleTranMoney">{{
                  t('walletInfo_page_in') }}
              </nut-button>
            </div>
            <div class="flex align-center justify-center tips">
              <span style="color: #fff;"> {{ t('walletInfo_page_tranferTips') }} </span>
            </div>
          </view>
        </view>
      </view>
    </Modal>
  </div>
</template>

<script setup lang="ts">
import { showNotify } from "@nutui/nutui";
import { useI18n } from "vue-i18n";
import { onMounted, onUnmounted, ref } from "vue";
import { MessageEvent2 } from "@/net/MessageEvent2";
import { NetMsgType } from "@/netBase/NetMsgType";
import AddBankCard from "@/views/withdrawals/component/addBankCard.vue";
import CalibrationInfo from "./component/calibrationInfo.vue";
import { Net } from "@/net/Net";
import { NetPacket } from "@/netBase/NetPacket";
import chooseBankDialog from '@/views/deposit/chooseBankDialog.vue';
import { removeComma, verifyNumberComma } from "@/utils/publicMethods";

import { storeToRefs } from 'pinia';
import pinia from "@/store";
import { User } from '@/store/user';
import { showToast } from "@nutui/nutui";
import { useRouter } from "vue-router";

const router = useRouter();
const { t } = useI18n();
const UserStore = User(pinia);
const { info: userInfo, roleInfo } = storeToRefs(UserStore);
const closeCapitalVisible = ref(false)
const chooseBankModal = ref();
// 新增银行卡
const addBankCardVisible = ref(false)
// 校验弹窗
const calibrationVisible = ref(false)
const form = ref({
  maxValue: '0',
  amount: '',
  capitalPassword: roleInfo.value.withdraw_pwd,
  showConfirm: false
})
const readonly = ref(true)

const inputBlur = () => {
  form.value.amount = verifyNumberComma(String(form.value.amount))
}

// 保险箱
const showSafeBox = ref(false)
const saveAmount = ref()
const choosePercent = [
  { label: '1/3', value: 3 },
  { label: '1/2', value: 2 },
  { label: t('promo_page_all'), value: 1 },
];
// 选择快捷金额
const chooseSafeAmount = (v: any) => {
  // 保险箱金额/v
  saveAmount.value = verifyNumberComma(String(parseInt(String(roleInfo.value.money / (+v)))))
}
// 存入保险柜
const handleTranMoney = () => {
  const numMon = removeComma(saveAmount.value);
  if (!numMon || numMon === 0) {
    return showNotify.danger(t('transfer_page_inputAmount'))
  }
  if (numMon > Number(roleInfo.value.money)) {
    return showNotify.danger(t('transfer_page_notEnough'))
  }
  const req = NetPacket.req_bank_save();
  req.money = removeComma(saveAmount.value);
  Net.instance.sendRequest(req);
};
const handleGameToCenter = (res: any) => {
  if (res.is_success === 1) {
    saveAmount.value = '' // 清空金额
    showNotify.success(t('proxy_page_caoZuo'))
  } else {
    showNotify.danger(t('proxy_page_caoZuoFail'))
  }
}

// 打开银行弹窗
const openChooseBank = () => {
  chooseBankModal.value.onCloseBank();
}
const bankListData = ref(
  { value: 0, label: '' }
)
// 选择银行
const selectBank = (e: any) => {
  bankListData.value = e
  // chooseBank.value = e;
}

onMounted(() => {
  // 防止自动填充
  setTimeout(() => {
    readonly.value = false
  }, 100)
})

const backItemInfo = ref({
  bank_id: 0,
  bank_name: '',
  account_number: ''
})

const showChangeBank = () => {
  addBankCardVisible.value = !addBankCardVisible.value
}
// 选择银行信息
const addBankCardUse = (item: any, type: string,) => {
  let req;
  if (type === 'default') {//设为默认
    req = NetPacket.req_set_default_bankcard();
  } else if (type === 'del') {
    req = NetPacket.req_del_bank_card_info();
  }
  req.bankcard = `${item.bank_id}_${item.account_number}`;
  Net.instance.sendRequest(req);
  addBankCardVisible.value = false
}

// 选择快捷金额
const chooseFastMon = (e: any) => {
  if (!form.value.amount) { form.value.amount = '0' }
  form.value.amount = removeComma(form.value.amount) + e;
  form.value.amount = verifyNumberComma(String(form.value.amount))
}
const chooseMoneyArr = [
  { label: '100,000', value: 100000 },
  { label: '200,000', value: 200000 },
  { label: '500,000', value: 500000 },
  { label: '1,000,000', value: 1000000 },
  { label: '10,000,000', value: 10000000 },
  { label: '100,000,000', value: 100000000 },
];


const capitalPassword = ref({
  value: '',
  showConfirm: false,

})
const switchPassword = ref(true)
const switchPassword1 = ref(true)
const once = ref(true)
const checkShowConfirm = () => {
  form.value.showConfirm = !form.value.showConfirm
}

const capitalConfirm = () => {
  if (!capitalPassword.value.value) return showToast.fail(t('walletInfo_page_enterPayPwd'))
  const req = NetPacket.req_open_or_close_withdraw_password()
  req.operate_type = switchPassword.value ? 1 : 2
  req.role_id = roleInfo.value?.id
  req.withdraw_password = capitalPassword.value.value
  Net.instance.sendRequest(req);
}

const switchChange = (e: boolean) => {
  if (once.value) return
  if (!e) {
    closeCapitalVisible.value = true
  } else {
    const req = NetPacket.req_open_or_close_withdraw_password()
    req.operate_type = 1
    req.role_id = roleInfo.value?.id
    req.withdraw_password = capitalPassword.value.value
    Net.instance.sendRequest(req);
  }
}

const capitalClose = () => {
  switchPassword.value = switchPassword1.value
  once.value = true
  setTimeout(() => { once.value = false }, 100)
}


const onSubmit = () => {
  if (!backItemInfo.value.bank_id) {
    return showToast.fail(t('paymentManagement_page_chBank'))
  }
  const numMon = removeComma(form.value.amount);
  if (numMon < Number(myBankData.value.min_withdraw_money)) {
    return showToast.fail(t('withdraw_page_minAmount', { minAmount: myBankData.value.min_withdraw_money }))
  }
  if (numMon > Number(myBankData.value.max_withdraw_money)) {
    return showToast.fail(t('withdraw_page_maxAmount', { maxAmount: myBankData.value.max_withdraw_money }))
  }

  if (myBankData.value.calibrationVisible) {
    calibrationVisible.value = true
  } else {
    handleSubmit()
  }


  // calibrationVisible.value = true
}

const handleSubmit = () => {
  const req = NetPacket.req_apply_withdraw();
  req.money = removeComma(form.value.amount);
  req.bank_card_id = backItemInfo.value.account_number || ''
  req.bank_id = backItemInfo.value.bank_id || 0;
  req.passwd = form.value.capitalPassword || capitalPassword.value.value
  req.way = 1; // 1 银行卡，2 USTD
  Net.instance.sendRequest(req);
};

// 0=>申请成功, 1=>申请失败
const handleWithDrawSubmit = (res: any) => {
  const codeTxt: any = {
    0: t('withdraw_page_subSucces'),
    1: t('withdraw_page_fail_tips1'),
    2: t('withdraw_page_fail_tips2'),
    3: t('withdraw_page_fail_tips3'),
    4: t('withdraw_page_fail_tips4'),
    5: t('withdraw_page_fail_tips5'),
    6: t('withdraw_page_fail_tips6'),
  }
  if (res.result === 0) {
    showToast.success(codeTxt[res.result])
    router.push('/withdraw_record')
  } else {
    showToast.fail(codeTxt[res.result])
  }
}


const getMyBankList = () => {
  const req = NetPacket.req_bank_card_info_list();
  Net.instance.sendRequest(req);
}


const myBankData = ref({
  list: [],
  cardholder_name: '',
  withdraw_pwd: '',
  phone: '',
  min_withdraw_money: '',
  max_withdraw_money: '',
  calibrationVisible: false,
})

const handleMyBankList = (res: any) => {
  if (!res?.bank_card_info_list.length) {
    calibrationVisible.value = true
    myBankData.value.calibrationVisible = true
  } else {
    let list = res.bank_card_info_list.reverse();
    let data = list[0]
    backItemInfo.value.bank_id = data.bank_id
    backItemInfo.value.bank_name = data.bank_name
    backItemInfo.value.account_number = data.account_number
    myBankData.value.list = res?.bank_card_info_list || []
  }

  if (!userInfo.value.mobile) {
    calibrationVisible.value = true
    myBankData.value.calibrationVisible = true
  } else {
    myBankData.value.phone = userInfo.value.mobile
  }

  if (!roleInfo.value.withdraw_pwd) {
    calibrationVisible.value = true
    myBankData.value.calibrationVisible = true
  } else {
    myBankData.value.withdraw_pwd = roleInfo.value.withdraw_pwd
  }

  myBankData.value.calibrationVisible = !(res?.bank_card_info_list.length && userInfo.value.mobile && roleInfo.value.withdraw_pwd);

  myBankData.value.cardholder_name = res?.cardholder_name || ''
  myBankData.value.min_withdraw_money = res?.min_withdraw_money || 0
  myBankData.value.max_withdraw_money = res?.max_withdraw_money || 0

}


const isCanWithdraw = ref(false)
const showDaiWanCheng = ref(false)
const withdrawData = ref({
  turnover: 0,
  canot_withdraw: 0,
})
const handleCanWithdraw = (res: any) => {
  withdrawData.value.turnover = res?.turnover
  withdrawData.value.canot_withdraw = res?.canot_withdraw
  if (res.rlt == 2) {//有订单在处理中
    // 显示有待处理订单
    showDaiWanCheng.value = true
    isCanWithdraw.value = false
  } else {
    isCanWithdraw.value = true
    // 弹保险柜判断 保险柜<可提款金额时，弹   (还要满足不展示完善信息弹框)
    if (roleInfo.value.bank_money < res.can_withdraw && !calibrationVisible.value) {
      showSafeBox.value = true
    }
  }
  setCanWithDrawMon();
};
// 设置可提现金额
const setCanWithDrawMon = () => {
  if (isCanWithdraw.value) {
    form.value.maxValue = verifyNumberComma(String(roleInfo.value.bank_money))
  } else { // 不可以提现，可提现金额置为 0
    form.value.maxValue = '0'
  }
}

const reqWithdrawPasswordStatus = () => {
  // 提现是否需要资金密码
  const req = NetPacket.req_open_or_close_withdraw_password()
  req.operate_type = 3
  req.role_id = roleInfo.value?.id
  req.withdraw_password = capitalPassword.value.value
  Net.instance.sendRequest(req);
}
const initReq = () => {
  Net.instance.sendRequest(NetPacket.req_can_withdraw());
  refreshFlag.value = false
  reqWithdrawPasswordStatus()
};


// 头部刷新
const refreshFlag = ref(false); //刷新标记
const refresh = () => {
  refreshFlag.value = !refreshFlag.value
  getMyBankList()
  initReq()
}
// 金额显示隐藏
const eyeOpen = ref(true); // 余额是否可见
const hideText = ref("*****")
const changeEyeOpen = (value: boolean) => {
  eyeOpen.value = value;
}
const handleDelBankList = (res: any) => {
  if (res.result === 0) {
    showToast.success(t('proxy_page_caoZuo'))
    getMyBankList();
  } else {
    showToast.fail(t('proxy_page_caoZuoFail'))
  }
}
// 设置默认银行
const handleDefaultBank = (res: any) => {
  if (res.rlt === 0) {
    showToast.success(t('proxy_page_caoZuo'))
    getMyBankList();
  } else {
    showToast.fail(t('proxy_page_caoZuoFail'))
  }
}
// 返回是否可以进行修改或绑定资金密码
const handleModifyWithdrawPassword = (res: any) => {
  if (res.code == 1) {
    closeCapitalVisible.value = false
    switchPassword.value = false
    switchPassword1.value = false
  } else if (res.code == 2) {
    switchPassword.value = true
    switchPassword1.value = true
  } else if (res.code == 3) {
    switchPassword.value = !switchPassword.value
  }
  setTimeout(() => { once.value = false }, 100)
}

onMounted(() => {

  // 可提现金额
  MessageEvent2.addMsgEvent(NetMsgType.msgType.msg_notify_can_withdraw, handleCanWithdraw);
  setTimeout(() => initReq(), 600);
  MessageEvent2.addMsgEvent(NetMsgType.msgType.msg_notify_apply_withdraw, handleWithDrawSubmit);


  getMyBankList()
  MessageEvent2.addMsgEvent(NetMsgType.msgType.msg_notify_bank_card_info_list, handleMyBankList);

  MessageEvent2.addMsgEvent(NetMsgType.msgType.msg_notify_del_bank_card_info, handleDelBankList);
  MessageEvent2.addMsgEvent(NetMsgType.msgType.msg_notify_set_default_bankcard, handleDefaultBank);

  MessageEvent2.addMsgEvent(
    NetMsgType.msgType.msg_notify_open_or_close_withdraw_password,
    handleModifyWithdrawPassword
  );
  MessageEvent2.addMsgEvent(
    NetMsgType.msgType.msg_req_open_or_close_withdraw_password,
    handleModifyWithdrawPassword
  );

  MessageEvent2.addMsgEvent(NetMsgType.msgType.msg_notify_bank_save_result, handleGameToCenter);
})


onUnmounted(() => {

  MessageEvent2.addMsgEvent(NetMsgType.msgType.msg_notify_bank_card_info_list, null);

  // 可提现金额
  MessageEvent2.addMsgEvent(NetMsgType.msgType.msg_notify_can_withdraw, null);
  setTimeout(() => initReq(), 600);

  MessageEvent2.addMsgEvent(NetMsgType.msgType.msg_notify_apply_withdraw, null);

  MessageEvent2.removeMsgEvent(NetMsgType.msgType.msg_notify_del_bank_card_info, null);
  MessageEvent2.removeMsgEvent(NetMsgType.msgType.msg_notify_set_default_bankcard, null);
  MessageEvent2.removeMsgEvent(NetMsgType.msgType.msg_notify_open_or_close_withdraw_password, null);
  MessageEvent2.removeMsgEvent(NetMsgType.msgType.msg_req_open_or_close_withdraw_password, null);
  MessageEvent2.removeMsgEvent(NetMsgType.msgType.msg_notify_bank_save_result, null);

});

</script>

<style scoped lang="scss">
.wallet {
  color: #fff;
  font-size: 14px;
  padding: 10px;
  padding-top: 0;

  :deep(.nut-popup) {
    background: none;
  }
  .flex {
    display: flex;
  }

  .justify-center {
    justify-content: center;
  }

  .right-handler {
    display: flex;
    gap: 15px;
  }
  .nut-input,
  select {
    width: 100%;
    border: 1px solid #333260;
    background: #1D1C3C;
    border-radius: 8px;
    padding: 11px 10px;
    :deep(input) {
      &::placeholder {
        color: #504F6F;
      }
    }

  }

  .content {
    margin-top: 20px;
    position: relative;

    .daiwancheng {
      font-size: 12px;
      position: absolute;
      top: 0;
      background: rgba(0, 0, 0, 0.7);
      width: 100%;
      height: 28px;
      line-height: 28px;
      padding-left: 10px;
    }
  }

  .refresh {
    animation: refresh 1s linear infinite;
  }

  @keyframes refresh {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  .bg_color {
    background: #131232;
    border: 1px solid #2E296B;
    border-radius: 8px;
    padding: 16px 20px;
  }
  .withDraw_top {
    .label {
      position: relative;
      display: flex;
      padding-bottom: 12px;
      p {
        white-space: nowrap;
        font-size: 16px;
        &.mon {
          color: #FF9F69;
        }
      }
      &::after {
        content: '';
        width: 100%;
        height: 1px;
        position: absolute;
        background: #1D1B43;
        bottom: 0;
      }
    }
    .mon_sec {
      padding-top: 10px;
      .flex {
        margin-bottom: 3px;
        display: flex;
        justify-content: space-between;
        p:last-child {
          color: #C6C4F5;
          text-decoration: underline;
        }
      }
    }
  }

  form {
    .form_center {
      margin: 12px 0;
    }
    :deep(.nut-cell-group__wrap) {
      box-shadow: none;
      background: none;
      margin: 0;

      .nut-cell {
        background: none;
        padding: 0;
        margin-bottom: 14px;

        &::after {
          border: none;
        }

        //&.nut-form-item {
        //
        //  .nut-input,
        //  select {
        //    width: 100%;
        //    border: 1px solid #333260;
        //    background: #1D1C3C;
        //    border-radius: 8px;
        //    padding: 11px 10px;
        //  }
        //
        //}
      }
    }

    :deep(.nut-cell__title) {
      color: #fff;
      font-size: 14px;
      padding-right: 0;
    }

    .label-capital {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;


      .switch-password {

        width: 36px;
        height: 16px;
      }

      :deep(.switch-password) {
        --nut-switch-inside-open-transform: translateX(170%);
        --nut-switch-inside-close-transform: translateX(10%);

      }
    }

    .change_bank {
      display: flex;
      align-items: center;

      .selectBank {
        display: flex;
        align-items: center;
        cursor: pointer;
        width: 191px;
        height: 44px;
        border-radius: 8px;
        border: 1px solid #333260;
        background: #1D1C3C;
        margin-right: 6px;

        .bankName {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 90px;
          height: 28px;
          margin-right: 8px;
          margin-left: 8px;
          border-radius: 6px;
          background-image: radial-gradient(circle at 50% 14%, #4c36b3 0%, #3a2786 38%, #3c279a 51%);

          .icon {
            width: 18px;
            height: 18px;
            margin-right: 5px;
            background-color: #fff;

            img {
              width: 18px;
              height: 18px;
            }
          }

          span {
            width: calc(110px - 18px);
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
        }

        .mantissa {
          font-size: 14px;

        }
      }
    }

  }

  .projected {
    font-size: 12px;
    color: #60d580;
    margin: 0 0 16px;
  }

  .tips {
    line-height: 10px;

    .icon {
      display: inline-block;
      width: 12px;
      height: 12px;
      background: url(/imgs/payment/error_icon.webp) center no-repeat;
      background-size: 100%;
    }
  }
}

.body_sec {
  .refresh_icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url(/imgs/payment/Vector.webp) center no-repeat;
    background-size: 100%;

    &.search_icon {
      background-image: url(/imgs/payment/search_icon.webp);
    }
  }

  .kjje_div {
    flex-wrap: wrap;

    .kj_item {
      width: 97px;
      height: 44px;
      line-height: 44px;
      text-align: center;
      background: #1D1C3C;
      border: 1px solid #333260;
      border-radius: 8px;
      margin: 0 8px 8px 0;
      &:nth-child(3n) {
        margin-right: 0;
      }
    }
  }
}


// 默认按钮样式
.change_btn {
  border-radius: 8px;
  font-size: 14px;
  color: #fff;
  text-align: center;
  width: 110px;
  height: 44px;
  line-height: 44px;
  padding: 0;
  border: 0;
  &:active {
    color: #fff;
    border: 0;
  }
  .icon_jt {
    transform: rotate(90deg);
  }
  :deep(.nut-button__wrap) {
    transform: scaleX(-1);
    .nut-button__text {
      transform: scaleX(-1);
    }
  }
}

.capital-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 57px;
  height: 100%;
  border: none;
  background-image: radial-gradient(circle at 50% 11%, #361e79, #202137 97%);

  .nut-input {
    width: 100%;
    border: 1px solid #333260;
    background: #1D1C3C;
    border-radius: 8px;
    padding: 11px 10px;
  }

  .btn {
    width: 200px;
    height: 43px;
    margin-top: 20px;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    line-height: 39px;
    background: url(/imgs/payment/go-btn.webp) 40% 85% no-repeat;
    background-size: 100%;
    padding: 0;
    border: 0;
    border-radius: 12px;
  }
}

// 保险箱
.safe_box {
  .safe_data {
    padding: 15px;
    display: flex;
    color: #fff;
    gap: 15px;

    .left,
    .right {
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .amount {
      font-size: 16px;
      background: #1A0C41;
      padding: 8px;
      border-radius: 8px;
      margin-top: 6px;
      border: .5px solid #333;
    }

    .right>.amount {
      color: #FFDC82;
    }
  }

  .safe_money {
    padding: 15px;
    color: #ccc;

    .nut-input,
    select {
      width: 315px;
      margin-left: 15px;
      margin-top: 6px;
      border: 1px solid #333260;
      background: #1D1C3C;
      border-radius: 8px;
      padding: 11px 10px;
    }

    .refresh_icon {
      display: inline-block;
      width: 20px;
      height: 20px;
      background: url(/imgs/payment/Vector.webp) center no-repeat;
      background-size: 100%;

      &.search_icon {
        background-image: url(/imgs/payment/search_icon.webp);
      }
    }
  }

  .kjje_div {
    display: flex;
    gap: 9px;
    margin-bottom: 12px;
    margin-left: 15px;
    margin-top: 10px;

    .kj_item {
      width: 99px;
      height: 32px;
      line-height: 32px;
      text-align: center;
      background: url(/imgs/payment/monBg.webp) center no-repeat;
      background-size: 100%;
    }
  }
}

.btn_zone {

  .submit_btn {
    margin: 20px auto 10px;
    font-size: 16px;
    border: 0;
    width: 307px;
    height: 44px;
    border-radius: 8px;
    color: #fff;

    &.fixed_bg {
      background-size: 100% 112%;
    }
  }
}
</style>
